<template>
	<ls-skeleton :loading="lsLoading">
		<view class="container">
			<view class="list flex-row row-between-wrapper">
				<navigator class="item" hover-class="none" v-for="(item, index) in saleList" :key="index"
					:url="'/pages/merchants/goods_detail/index?customerId=' + item.customerId">
					<view class="pictrue on">
						<image :src="item.storeUrl || '../../../static/images/default.png'"></image>
					</view>
					<view class="text">
						<view class="tips">{{item.customerName}}</view>
						<view class="text-green" v-if="item.categoryList">
							<text class="" v-for="(itemn, indexn) in item.categoryList" :key="indexn">{{itemn.name}}</text>
						</view>
						<view class="line1">{{item.remark}}</view>
						<view class="flex-row row-between-wrapper focus">
							<view>好评度 {{item.evalCount}}%</view>
							<view :class="['focusBtn', item.isFocus == 'Y' ? 'border-green text-green' : ''] "
								@click.stop="focus(index, item.customerId)">{{item.isFocus == 'Y' ? '已关注' : '关注'}}</view>
						</view>
					</view>
				</navigator>
			</view>
			<view class='loadingicon flex-row row-center-wrapper' v-if="saleList.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view v-if="saleList.length == 0">
				<u-empty marginTop="100" mode="favor" icon="../../../../static/images/list.png" text="暂无商家" width="320"
					height="320" textSize="24"></u-empty>
			</view>
			<view class="footer">
				<u-button type="primary" color="#06A972" text="我是批发商" @click="applySave"></u-button>
			</view>
		</view>
	</ls-skeleton>
</template>


<script>
	import {
		toLogin,
	} from '@/libs/login.js';
	import {
		getCustomerByCategory
	} from "@/api/cus.js";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				saleList: [],
				cid: 0,
				title: '',
				isClick: true,
				lsLoading: true,
				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				page: 1,
				limit: 15,
			}

		},
		computed: mapGetters(['isLogin', 'uid']),
		onLoad(option) {
			let that = this;
			that.cid = option.cid || 0;
			that.title = option.title || '';
			if (!that.cid) {
				return this.$util.Tips({
					title: '品牌不存在'
				}, {
					tab: 3
				});
			}
			uni.setNavigationBarTitle({
				title: that.title
			});
			that.getCustomerByCategory();
		},

		onShow() {
			// let that = this;
			// if (that.isLogin == false) {
			// 	toLogin();
			// }
			// that.getCustomerByCategory();
		},

		methods: {

			/**
			 * 获取供应商列表
			 */
			getCustomerByCategory() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				getCustomerByCategory({
					cid: that.cid,
					page: page,
					limit: limit,
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					let list = res.value ? res.value.list : [];
					let loadend = list.length < that.limit;
					that.saleList = that.$util.SplitArray(list, that.saleList);
					that.$set(that, 'saleList', that.saleList);
					that.lsLoading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
					that.page += 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
					that.$util.Tips({
						title: err
					});
				})
			},

			focus(index, customerId) {
				let that = this,
					url;
				if (that.saleList[index].isFocus == 'N') {
					that.saleList[index].isFocus = 'Y';
					url = 'share/focus'
				} else {
					that.saleList[index].isFocus = 'N';
					url = 'share/unFocus'
				}
				that.$request.get(url, {
					userInfoId: that.$store.state.app.uid,
					shareEvalType: 'CUS_INFO',
					mainId: customerId
				}).then(res => {
					if (that.saleList[index].isFocus == 'Y') {
						that.$util.Tips({
							title: '关注成功'
						})
					} else {
						that.$util.Tips({
							title: '关注已取消'
						})
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			
			applySave() {
				uni.navigateTo({
					url: '/pages/merchants/apply_agent/index'
				});
			}
		},
		
		onReachBottom: function() {
			this.getCustomerByCategory();
		}
	}
</script>

<style>
	.container {
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}
	
	.list {
		padding: 0 20rpx;
	}

	.list .item {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.list .item .pictrue {
		width: 180rpx;
		height: 180rpx;
	}

	.list .item .pictrue image {
		width: 100%;
		height: 100%;
	}

	.list .item .text {
		width: 254px;
		padding: 0 0 0 11px;
		font-size: 24rpx;
		color: #BDBDBD;
	}

	.list .item .text .tips {
		font-weight: bold;
		font-size: 32rpx;
		color: #000;
	}
	
	.list .item .text .text-green text~text {
		padding-left: 5rpx;
	}
	
	.list .item .text .focus {
		height: 56rpx;
	}
</style>